<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/browseArticles/browseArticles.css">
    <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/js/browseArticles/browseArticles.js"></script>
</head>
<body>
<div class="container">
    <div class="favorites-div">
        <div class="head">
            添加收藏夹
            <span class="collection-close">x</span>
        </div>
        <ul class="collection-items">
            <li th:each="item:${favorites}" th:name="${item.objectid}">
                <span th:text="${item.favoritename}">sdf</span>
            </li>

        </ul>
        <div class="collection-folder">
            <div class="collection-input" style="display: block;">
                <input type="text" placeholder="新建文件夹">
                <button type="button">新建</button>
            </div>
        </div>
        <div class="collection-footer">
            <button class="collection-submit">确 定</button>
        </div>
    </div>
    <aside class="left">
        <div class="introduction">
            <div class="head-div">
                <a href="">
                    <img src="/img/头像.svg" th:src="${#strings.isEmpty(browseArticlesUserInfo.user.headportrait)}==true?'/img/头像.svg':${browseArticlesUserInfo.user.headportrait}"  alt="" class="headImg">
                </a>
                <div class="head-div-right">
                    <dl>
                        <dt>
                            <a href="" class="a-img">
                        <span class="name" th:name="${browseArticlesUserInfo.user.objectid}" th:text="${browseArticlesUserInfo.user.nickname}">
                        白学的
                        </span>
                            </a>
                        </dt>
                        <dd>
                            <span class="personal-home-page">码年龄12年</span>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <span th:style="'background:url(/img/等级' + ${browseArticlesUserInfo.user.grade}+'.png);background-size: 20px 20px;'" alt=""/>
                        </dt>
                        <dd>
                            等级
                        </dd>
                    </dl>
                </div>
            </div >
            <hr class="fenge"/>
            <div class="data-dianzan">
                <dl>
                    <dt th:text="${browseArticlesUserInfo.user.integral==null}==true?0:${browseArticlesUserInfo.user.integral}">54</dt>
                    <dd>积分</dd>
                </dl>
                <dl>
                    <dt id="fanCount" th:text="${browseArticlesUserInfo.fans}">12</dt>
                    <dd>粉丝</dd>
                </dl>
                <dl>
                    <dt id="likeCount" th:text="${browseArticlesUserInfo.like}">15</dt>
                    <dd>点赞</dd>
                </dl>
                <dl>
                    <dt id="favoriteCount" th:text="${browseArticlesUserInfo.collect}">10</dt>
                    <dd>收藏</dd>
                </dl>
            </div>
            <div class="data3">
                <a>私信</a>
                <a class="follow"  th:name="${isFollow}" th:text="${isFollow==true?'已关注':'关注'}" th:style="'color:'+${isFollow==true?'#999aaa':'#555666'}">关注</a>
            </div>
        </div>
        <div class="search-articles">
            <div>
                <input id="search-blog-words" placeholder="搜博主文章" type="text">
                <span></span>
            </div>
        </div>
        <div class="recent-articles">
            <dl>
                <dt>近期文章</dt>
                <dd th:each="yuanwen:${RecentYuanwens}">
                    <a th:href="@{/yuanwen/getViewBrowseAritcle(objectId=${yuanwen.objectid})}" th:text="${yuanwen.title}"></a>
                </dd>
            </dl>
        </div>
    </aside>
    <main class="right">
        <div class="article-header-box">
            <h1 id="articleContentId" th:name="${browseAritclesInfo.yuanwen.objectid}" th:text="${browseAritclesInfo.yuanwen.title}" class="title-article">
                HTML5如何使用SVG
            </h1>
            <div class="article-info-box">
                <div class="bar-content">
                    <span class="nickName" th:text="${browseArticlesUserInfo.user.nickname}">
                        df
                    </span>

                    <span class="time" th:text="${browseAritclesInfo.yuanwen.createtime==null}==true?0:${browseAritclesInfo.yuanwen.createtime}">
                        2019-01-05 00:46:13
                    </span>
                    <span class="fist">
                        <img src="/img/可见.png" height="24px" width="24px" alt="">
                        <span th:text="${browseAritclesInfo.yuanwenIncident.observations==null}==true?0:${browseAritclesInfo.yuanwenIncident.observations}">
                            26390
                        </span>
                    </span>
                    <span class="shoucang" th:name="${isCollectYuanWen}">
                        <img th:src="${isCollectYuanWen}==true?'/img/已收藏.png':'/img/收藏.png'" src="/img/收藏.png"  height="20px" width="20px" alt="">
                        <span th:text="${isCollectYuanWen}==true?'已收藏':'收藏'">
                            收藏
                        </span>
                        <span th:text="${browseAritclesInfo.yuanwenIncident.collections==null}==true?0:${browseAritclesInfo.yuanwenIncident.collections}">
                            33
                        </span>
                    </span>

                    <span class="like" th:name="${isLikeYuanWen}">
                        <img th:src="${isLikeYuanWen}==true?'/img/已点赞.png':'/img/点赞.png'" height="20px" width="20px" alt="">
                        <span th:text="${browseAritclesInfo.yuanwenIncident.likes==null}==true?0:${browseAritclesInfo.yuanwenIncident.likes}">
                        </span>
                    </span>
                    
                </div>
                <div class="tags-box">
                    <span th:if="${!#lists.isEmpty(browseAritclesInfo.specialColumns)}" >
                        <span class="specialColumns">分类专栏：</span>
                        <a href="#" th:each="babel:${browseAritclesInfo.specialColumns}" th:text="${babel.name}"></a>
                    <a>
                        java
                    </a>
                    </span>
                    <span class="label" >文章标签：</span>
                    <a th:each="babel:${browseAritclesInfo.label}" th:text="${babel.name}">
                        前端
                    </a>
                    <a>
                        算法
                    </a>
                </div>
            </div>
        </div>
        <article>
            <div id="article_content" class="article_content clearfix" th:text="${browseAritclesInfo.yuanwen.content}">

            </div>
        </article>
    </main>
</div>
</body>
</html>